<!-- 主容器 -->
<div style="
    margin: 0 12px;
    padding: 16px 0;
    font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #ffffff;
  ">
  <!-- 目录部分 -->
  <div style="
      margin: 20px 8px;
      padding: 20px;
      background: #f7f8fa;
      border-radius: 8px;
    ">
    <div style="
          margin-bottom: 20px;
          padding-bottom: 12px;
          border-bottom: 2px solid #1677ff;
          color: #1677ff;
          font-size: 18px;
          font-weight: bold;
        ">
      目录导航
    </div>

    <% for(var i=0; i<articles.length; i++) { var article=articles[i]; %>
      <div style="
              margin: 12px 0;
              padding: 16px;
              background: #ffffff;
              border-radius: 6px;
              border-left: 4px solid #1677ff;
            ">
        <span style="
                  display: inline-block;
                  min-width: 24px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  background: #1677ff;
                  color: #ffffff;
                  font-size: 14px;
                  font-weight: bold;
                  border-radius: 4px;
                  margin-right: 12px;
                ">
          <%= (i + 1).toString().padStart(2, '0' ) %>
        </span>
        <span style="
                  color: #1a1a1a;
                  font-size: 15px;
                  font-weight: 500;
                ">
          <%= article.title %>
        </span>
      </div>
      <% } %>
  </div>

  <!-- 文章内容部分 -->
  <% for(var j=0; j<articles.length; j++) { var article=articles[j]; %>
    <div style="
          margin: 32px 8px;
          padding: 24px;
          background: #ffffff;
          border: 1px solid #eaeaea;
          border-radius: 8px;
        ">
      <!-- 文章标题区 -->
      <div style="
              margin-bottom: 24px;
              padding: 16px;
              background: #f7f8fa;
              border-radius: 6px;
            ">
        <!-- 编号标签 -->
        <div style="
                  margin-bottom: 12px;
                  color: #1677ff;
                  font-size: 14px;
                  font-weight: bold;
                ">
          NO.<%= (j + 1).toString().padStart(2, '0' ) %>
        </div>

        <!-- 标题 -->
        <div style="
                  font-size: 22px;
                  font-weight: bold;
                  color: #1a1a1a;
                  margin-bottom: 12px;
                  line-height: 1.4;
                ">
          <%= article.title %>
        </div>

        <!-- 发布日期 -->
        <div style="
                  color: #666666;
                  font-size: 13px;
                ">
          <%= article.publishDate %>
        </div>
      </div>

      <!-- 文章内容 -->
      <div style="
              padding: 0 16px;
              background: #ffffff;
            ">
        <% var content=article.content || "" ; var paragraphs=content.split("<next_paragraph />");
        for(var i=0; i<paragraphs.length; i++) { var para=paragraphs[i].trim(); if(para.length> 0) {
          %>
          <p style="
                      margin: 0 0 16px;
                      line-height: 1.8;
                      color: #262626;
                      font-size: 15px;
                      text-align: justify;
                    "><%- para %></p>
          <% }} %>
      </div>
    </div>

    <!-- 文章分隔 -->
    <% if (j < articles.length - 1) { %>
      <div style="
              margin: 0 auto;
              width: 120px;
              height: 2px;
              background: #eaeaea;
            "></div>
      <% } %>
        <% } %>
</div>